<template>
  <div id="home" class="wrapper">

    <nav-bar class="home-nav">
      <div slot="center">购物街</div>
    </nav-bar>

    <tab-control :titles="['流行','新款','精选']" v-show="isTabFixed" class="tab-control  tab-control-fixed"
                 @tabClick="tabClick"
                 ref="tabControl1"/>

    <scroll class="content" ref="scroll"
            :probe-type="3"
            @scroll="contentScroll"
            @loadMore="loadMore"
            :pull-up-load="true">

      <a-carousel autoplay>
        <div v-for="item in banners" class="img-box">
          <a :href="item.link">
            <img :src="item.image" class="img" @load="imgLoad"/>
          </a>
        </div>
      </a-carousel>

      <home-recommend-view :recommends="recommends"/>

      <feature-view/>

      <tab-control :titles="['流行','新款','精选']" class="tab-control" @tabClick="tabClick"
                   ref="tabControl2"/>

      <goods-list :goods="showGoods"/>

    </scroll>

    <back-top @click.native="backClick" v-show="isShow"/>


    <!--    <div class="white"/>-->

  </div>
</template>

<script>

  //导入公共组件
  import NavBar from '../../components/common/navbar/NavBar';
  import TabControl from '../../components/content/tabControl/TabControl';
  import GoodsList from '../../components/content/goods/GoodsList';
  import Scroll from '../../components/common/scroll/Scroll';
  import BackTop from '../../components/content/backTop/BackTop';
  //导入业务组件
  import HomeRecommendView from './childComps/HomeRecommendView';
  import FeatureView from './childComps/FeatureView';
  //请求首页数据方法
  import {getHomeGoods, getHomeMultidata} from '../../network/home';
  //导入工具类方法
  import {debounce} from '../../common/utils';
  import {itemListenerMixin} from '../../common/mixin';

  export default {
    name: 'Home',
    components: {
      BackTop,
      Scroll,
      GoodsList,
      TabControl,
      FeatureView,
      HomeRecommendView,
      NavBar

    },

    computed: {
      showGoods() {
        return this.goods[this.currentType].list;
      }
    },

    methods: {

      //网络请求方法
      getHomeData() {
        getHomeMultidata().then((res) => {
          this.banners = res.data.banner.list;
          this.recommends = res.data.recommend.list;
        });
      },

      getHomeGoods(type) {
        let page = this.goods[type].page + 1;
        getHomeGoods(type, page).then((res) => {
          this.goods[type].list.push(...res.data.list);
          this.goods[type].page += 1;
          this.$refs.scroll.finishLoadMore();
        });
      },

      loadMore() {
        console.log(777);
        this.getHomeGoods(this.currentType);
      },

      //事件监听方法
      tabClick(index) {

        this.$refs.tabControl1.currentIndex = index;
        this.$refs.tabControl2.currentIndex = index;
        switch (index) {
          case 0:
            this.currentType = 'pop';
            break;
          case 1:
            this.currentType = 'new';
            break;
          case 2:
            this.currentType = 'sell';
            break;
        }
      },

      backClick() {
        this.$refs.scroll.scrollTo(0, 0);
      },

      contentScroll(position) {

        //判断backTop是否显示
        this.isShow = position.y < -1000;
        // this.saveY = position.y;


        //判断tab-control是否吸顶
        this.isTabFixed = (-position.y) > this.tabOffsetTop;
      },

      imgLoad() {
        //获取tab-control的滑动距离
        if (!this.isImgLoad) {
          this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
          this.isImgLoad = true;
        }
      }


    },

    data() {
      return {
        banners: [],
        recommends: [],
        titles: [],
        goods: {
          'pop': {page: 0, list: []},
          'new': {page: 0, list: []},
          'sell': {page: 0, list: []}
        },
        currentType: 'pop',
        isShow: false,
        tabOffsetTop: 0,
        isImgLoad: false,
        isTabFixed: false,
        saveY: 0,
        itemImgListener:null

      };
    },

    mixins: [itemListenerMixin],

    created() {
      //获取首页数据
      this.getHomeData();

      //获取首页商品数据
      this.getHomeGoods('pop');
      this.getHomeGoods('new');
      this.getHomeGoods('sell');

    },


    activated() {
      console.log('activated');

      this.$refs.scroll.scrollTo(0, this.saveY, 0);

      this.$refs.scroll.refresh();


    },

    deactivated() {
      console.log('deactivated');

      this.saveY = this.$refs.scroll.getScrollY();
    },


    mounted() {


      //监听图片加载完成
      const refresh = debounce(this.$refs.scroll.refresh, 500);
      this.itemImgListener=()=>{
        refresh()
      }
      this.$bus.$on('itemImgLoad', () => {
        refresh();
        //this.$refs.scroll.refresh();
      });


    },
    destroyed(){
      this.$bus.$off('itemImgLoad',this.itemImgListener);
    }

  };
</script>

<style scoped>

  #home {
    /*padding-top: 44px;*/
    height: 100vh;
  }

  .home-nav {
    background-color: var(--color-tint);
    color: #fff;
    /*position: fixed;*/
    /*z-index: 9;*/
    /*left: 0;*/
    /*right: 0;*/
    /*top: 0;*/
  }

  /*.content {*/
  /*  height: calc(100% - 93px);*/
  /*  overflow: hidden;*/
  /*  margin-top: 44px;*/
  /*}*/

  .content {
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
  }

  .ant-carousel >>> .slick-slide {
    text-align: center;
    height: 180px;
    line-height: 180px;
    overflow: hidden;
  }

  .ant-carousel >>> .slick-slide h3 {
    color: #fff;
  }

  .img {
    width: 100%;
    height: 180px;
  }


  .tab-control {
    /*position: sticky;*/
    /*top: 44px;*/
    background-color: #fff;
  }

  .fixed {
    position: fixed;
    left: 0;
    right: 0;
    top: 44px
  }

  .tab-control-fixed {
    position: relative;
    z-index: 9;
  }

</style>
